<template>
    <div>
        <el-dialog :visible.sync="value" fullscreen title="成绩查询" center>
            <el-card style="border: 0px" shadow="never">
                <template slot="header">
                    <el-radio-group v-model="params.examType" style="margin-right: 10px;">
                        <el-radio label="1">日测</el-radio>
                        <el-radio label="2">周测</el-radio>
                        <el-radio label="3">月考</el-radio>
                    </el-radio-group>

                    <el-cascader :props="{emitPath:false,value:'id',label:'name',children:'children'}" :show-all-levels="false" collapse-tags filterable :options="computed_classesList" v-model="params.classesId" style="margin-right: 10px;">
                        <template slot-scope="{ node, data }">
                            <span>{{ data.name }}</span>
                            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                        </template>
                    </el-cascader>

                    <el-date-picker
                            style="margin-right: 10px"
                            type="daterange"
                            v-model="params.date"
                            :editable="false"
                            :clearable="false"
                            unlink-panels
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            range-separator="~"
                            value-format="yyyy-MM-dd"
                    ></el-date-picker>
                    <el-tooltip effect="dark" content="查询" placement="bottom">
                        <el-button type="info" circle plain @click="search" icon="el-icon-search"></el-button>
                    </el-tooltip>
                </template>
                <el-table :header-cell-style="{background:'#C0C4CC',color:'white',fontSize:'15px'}" :data="data_list" :render-header="labelHead" size="mini" border stripe v-loading="loading">
                    <el-table-column type="index" label="序号" align="center" width="80px"></el-table-column>
                    <el-table-column prop="nickName" label="姓名" align="center" width="120px"></el-table-column>
                    <el-table-column label="个人平均分" prop="avg" align="center"></el-table-column>
                    <el-table-column :label="date" v-for="(date, key) in headers" :key="date"  align="center">
                        <template slot-scope="scope">
                            <span v-if="data_list[scope.$index].scores[key] == -1" style="font-weight: bolder;color: red">未考</span>
                            <span v-if="data_list[scope.$index].scores[key] >= 80" style="color: green">{{data_list[scope.$index].scores[key]}}</span>
                            <span v-if="data_list[scope.$index].scores[key] >= 60 && data_list[scope.$index].scores[key] < 80" style="color: #ee9900">{{data_list[scope.$index].scores[key]}}</span>
                            <span v-if="data_list[scope.$index].scores[key] < 60 && data_list[scope.$index].scores[key] >= 0" style="color: red">{{data_list[scope.$index].scores[key]}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-dialog>
    </div>
</template>

<script>

    import { getClassesChildrenBySchool } from '@/api/academic/school'

    import { superviseExam } from '@/api/academic/exam'

    export default {
        name: "student-exam-supervise",
        data(){
            return {
                value:false,
                loading:false,
                params:{},
                classesList:[],
                headers:[],
                data_list:[]
            }
        },
        watch:{
            value(data){
                if(data){
                    getClassesChildrenBySchool({invalid:"1"}).then(res=>{
                        if(res.data.success){
                            this.classesList = res.data.data;
                        }
                    });
                }
            }
        },
        computed:{
            computed_classesList(){
                let data = this.classesList;

                data.forEach(school=>{
                    if(school && school.children){
                        school.children.forEach(curriculum=>{
                            if(curriculum && curriculum.classesChildren){
                                curriculum.children = curriculum.classesChildren;
                            }
                        })
                    }
                });

                return data;
            }
        },
        methods:{
            labelHead(column,index){//动态表头渲染
                return h('span',{class:'table-head',style:{width:'100%'}},[column.label])
            },
            search(){

                if(!this.params.examType){
                    this.$message.error("请选择类型");
                    return false;
                }

                if(!this.params.classesId){
                    this.$message.error("请选择班级");
                    return false;
                }

                if(!this.params.date){
                    this.$message.error("请选择日期");
                    return false;
                }

                this.loading = true;

                superviseExam(this.params).then(res=>{
                    if(res.data.success){
                        this.headers = res.data.data.headers;
                        this.data_list = res.data.data.vos;
                        this.loading = false;
                    }else{
                        this.data_list = [];
                        this.headers = [];
                        this.$message.error(res.data.message);
                        this.loading = false;
                        return false;
                    }
                });

            }
        }
    }
</script>

<style scoped>

</style>